import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router';
import * as moment from 'moment';
import * as _ from 'lodash';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import {
  DailyReportServiceProxy,
  SearchInputReport
} from '../../../shared/service-proxies/service-proxies';

@Component({
  selector: 'app-month-distribution-report',
  templateUrl: './month-distribution-report.page.html',
  styleUrls: ['./month-distribution-report.page.scss']
})
export class MonthDistributionReportPage implements OnInit {

  monthDataParam: SearchInputReport = new SearchInputReport();//获取月供水分布数据参数

  showNum: number = 0;
  optionData: number = 150;

  id: any = "aaa";
  nowDate: any = new Date();
  sureTime: any = parseInt(moment(this.nowDate).format("YYYY")) + parseInt(moment(this.nowDate).format("MM"));
  chartTitleTime: any;
  choosedMonth: any = new Date().getMonth() + 1;//获得月份
  distributeData: any = [];//供水分布情况数据
  chartMonthAllData: number = 0;//图表月供水量总量
  distributeNameList: any = [];
  distributeDataList: any = [];
  chartChildListBody: any = [];
  chartChildListHead: any = [];
  chartList: any = [];//月供水分布图列表
  chartDistributeData: any;//公司占比分布图

  constructor(
    private router: Router,
    private screenOrientation: ScreenOrientation,
    private _DailyReportServiceProxy: DailyReportServiceProxy,
  ) { 
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
  }

  ngOnInit() {
    this.getDistributeData();
  }
  //将要离开这个页面是触发
  ionViewWillLeave() {
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
  }
  goBack(){
    console.log(666)
    this.router.navigateByUrl('home');
    // this.location.back();
  }

  changeShowNum() {
    if(this.showNum == 0){
      this.showNum = 1;
      console.log("showNum", this.showNum);
    } else{
      this.showNum = 0;
    }
  }

  choosedTime() {
    this.nowDate = moment(this.sureTime.year.value + "-" + this.sureTime.month.text);
    this.monthDataParam.start = this.nowDate;
    this.monthDataParam.year = true;
    this.monthDataParam.tagfields = ["供水量"];
    this.distributeNameList = [];
    this.distributeDataList = [];
    this.distributeData = [];
    this.chartChildListBody = [];
    this.chartChildListHead = [];
    this.chartList = [];
    console.log("刷新this.chartList", this.nowDate);
    this.getDistributeData()
  }
  //月供水分布图
  getDistributeData() {
    let self = this;
    this.monthDataParam.start = this.nowDate;
    this.monthDataParam.year = true;
    this.monthDataParam.tagfields = ["供水量"];
    this._DailyReportServiceProxy.searchWaterReport(this.monthDataParam)
      .subscribe((res) => {
        this.chartTitleTime = moment(this.nowDate).format("YYYY-MM-DD").slice(0, 4) + "年" + moment(this.nowDate).format("YYYY-MM-DD").slice(5, 7) + "月供水占比图"
        let distributeObj = res;
        // console.log("distributeObj", distributeObj)
        for (let i in distributeObj) {
          if (distributeObj[i].month == this.choosedMonth) {
            this.distributeData.push(distributeObj[i])
          }
        }
        console.log("this.distributeData", this.distributeData);
        for(let i in this.distributeData){
          this.chartMonthAllData += parseFloat(this.distributeData[i].value);
        }
        let chartMonthAllData1 = this.distributeData.map(m =>{
          _.sum(m.value)
        });
        console.log("chartMonthAllData1", chartMonthAllData1);
        for (let j in this.distributeData) {
          this.distributeNameList.push(this.distributeData[j].tagName.slice(5, this.distributeData[j].tagName.length - 2));
          this.distributeDataList.push({
            value: parseFloat(this.distributeData[j].value),
            name: this.distributeData[j].tagName.slice(5, this.distributeData[j].tagName.length - 2)
          });
          this.chartChildListHead.push({
            name: this.distributeData[j].tagName.slice(5, this.distributeData[j].tagName.length - 2),
            value: ((parseFloat(this.distributeData[j].value) / (this.chartMonthAllData)) * 100).toFixed(2) + "%"
          });
         
        };
      
        // })
        this.chartList.push(this.chartChildListHead);
        this.chartDistributeData = {
          legend: {
            orient: "vertical",
            x: "right",
            top: 40,
            data: this.distributeNameList
          },
          toolbox: {
            show: true,
            itemSize: 18,
            iconStyle: {
              color: "#f5f5f5",
              borderColor: "#f5f5f5"
            },
            feature: {
              dataView: { show: false, readOnly: false },
              magicType: { show: false, type: ['line', 'bar'], color: "#f5f5f5" },
              restore: { show: false },
              saveAsImage: { show: false },
              myTool2: {
                show: true,
                title: '自定义扩展方法',
                icon: 'image://../../../assets/images/edit.png',
                onclick: function () {
                  self.changeShowNum();
                }
              }
            },
          },
          title: {
            text: this.chartTitleTime,
            subtext: "",
            x: "left",
            textStyle: {
              color: "#ffffff"
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },

          series: [{
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            label: { "formatter": "{b} : {c} ({d}%)" },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            data: this.distributeDataList
          }]
        }
        console.log("最终供水数据", this.chartDistributeData)
      })
  }

}
